<template>
    <van-config-provider :theme="theme">
        <router-view v-slot="{ Component }">
            <component
                :is="Component"
                v-model:theme="theme"
            />
        </router-view>
    </van-config-provider>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
export default {
    name: 'App',
    setup() {
        const theme = ref(window.themeManager ? window.themeManager.getCurrentTheme() : 'auto')
        function handleThemeChanged(e) {
            theme.value = e.detail.theme
        }
        onMounted(() => {
            window.addEventListener('themeChanged', handleThemeChanged)
        })
        onUnmounted(() => {
            window.removeEventListener('themeChanged', handleThemeChanged)
        })
        return { theme }
    }
}
</script>

<style>
    #app {
        font-family:
            'Microsoft Yahei',
            -apple-system,
            BlinkMacSystemFont,
            'Helvetica Neue',
            Helvetica,
            Segoe UI,
            Arial,
            Roboto,
            'PingFang SC',
            'miui',
            'Hiragino Sans GB',
            sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        background-color: var(--van-background);
        color: var(--van-text-color);
    }
</style>
